<template>
  <div>
    <logo v-if = "showLogo" :collapse = "isCollapse"></logo>
    <h6 @click = "closeCollapse" class = "h6">
      {{ isCollapse ? '&gt;&gt;&gt;' : '收起 &lt;&lt;&lt;' }}
    </h6>

    <!-- 菜单部分 -->
    <scroll-panel>
      <el-menu
          class = "sidebar-container-menu"
          mode = "vertical"
          :default-active = "activeMenu"
          :background-color = "scssVariables.menuBg"
          :text-color = "scssVariables.menuText"
          :active-text-color = "themeColor"
          :collapse = "isCollapse"
          :collapse-transition = "true"
      >
        <SidebarItem
            v-for = "route in menuRoutes"
            :key = "route.path"
            :item = "route"
            :base-path = "route.path"
        />
      </el-menu>
    </scroll-panel>
  </div>
</template>

<script lang = "ts">
import { computed, defineComponent, ref } from 'vue'
import { useRoute } from 'vue-router'
/* 导入scss变量 在组件中使用 */
import variables from '@/styles/variables.scss'
import SidebarItem from '@/components/Sidebar/SidebarItem.vue'
import { routes } from '@/router'
import { useStore } from '@/store'
import { TOGGLE_SIDEBAR } from '@/store/modules/methods-type'
import Logo from './logo.vue'
import ScrollPanel from "@/components/ScrollPanel/index.vue"

export default defineComponent({
  name: 'sideBar',
  components: {
    SidebarItem,
    Logo,
    ScrollPanel
  },
  setup() {
    /* 表示当前路由信息 */
    const route = useRoute()
    const store = useStore()
    /* 根据对应的路由路径 激活对应的菜单 */
    const activeMenu = computed(() => {
      const { path, meta } = route
      if ( meta.activeMenu ) {
        return meta.activeMenu
      }
      return path
    })
    /* 计算scss变量 */
    const scssVariables = computed(() => variables)
    /* 表示菜单展示状态 */
    const isCollapse = computed(() => !store.getters.sidebar.opened)
    /* 表示是渲染路由部分 */
    const menuRoutes = computed(() => routes)
    /* 获取默认颜色 */
    const themeColor = computed(() => store.getters.themeColor)
    /* 是否显示logo */
    const showLogo = computed(() => store.state.settings.sidebarLogo)

    const closeCollapse = () => {
      store.dispatch(`app/${ TOGGLE_SIDEBAR }`)
    }

    return {
      scssVariables,
      isCollapse,
      activeMenu,
      menuRoutes,
      closeCollapse,
      themeColor,
      showLogo
    }
  }
})
</script>

<style lang = "scss">
.h6 {
  color: #fff;
  font-weight: bold;
  text-align: left;
  cursor: pointer;
  padding-left: 20px;
  box-sizing: border-box;
}
</style>
